<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.bootcss.com/bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.2/vue-router.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>使用Watch监听路由的变化</title>
</head>
<body>
<div align="center">
    <h1>
        使用Watch监听路由的变化
    </h1>
</div>
<!--使用Watch监听路由的变化-->
<div id="app">
    <router-link to="/login">登录</router-link>
    <router-link to="/reg">注册</router-link>
<!--    容器-->
    <router-view></router-view>
</div>
</body>
<script>
    var login = {
        template : '<h3>登录页面</h3>'
    };

    var reg = {
        template : '<h3>注册页面</h3>'
    };

    var router = new VueRouter({
        routes:[
            {path:'/', redirect:'/login'},
            {path:'/login', component: login},
            {path:'/reg', component: reg}
        ],
        linkActiveClass: 'myactive'
    });

    new Vue({
        el: '#app',
        data:{
        },
        methods:{
        },
        components:{
        },
        router,
        watch:{
            '$route.path':function (newVal, oldVal) {
                console.log(newVal + '-' + oldVal)
                if (newVal === '/login') {
                    console.log('Login')
                }else if (newVal === '/reg') {
                    console.log('Reg')
                }
            }
        }
    });
</script>
</html>